<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>员工管理</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" media="all"/>
</head>
<body class="childrenBody">

<!-- 搜索条件开始 -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>查询条件</legend>
</fieldset>
<form class="layui-form" method="post" id="searchFrm">

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">员工姓名:</label>
            <div class="layui-input-inline" style="padding: 5px">
                <input type="text" name="empname" autocomplete="off" class="layui-input layui-input-inline"
                       placeholder="请输入员工姓名" style="height: 30px;border-radius: 10px">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">身份证号:</label>
            <div class="layui-input-inline" style="padding: 5px">
                <input type="text" name="identity" autocomplete="off" class="layui-input layui-input-inline"
                       placeholder="请输入身份证号" style="height: 30px;border-radius: 10px">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">家庭住址:</label>
            <div class="layui-input-inline" style="padding: 5px">
                <input type="text" name="address" autocomplete="off" class="layui-input layui-input-inline"
                       placeholder="请输入员工家庭住址" style="height: 30px;border-radius: 10px">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">员工电话:</label>
            <div class="layui-input-inline" style="padding: 5px">
                <input type="text" name="phone" autocomplete="off" class="layui-input layui-input-inline"
                       placeholder="请输入员工电话" style="height: 30px;border-radius: 10px">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">所属部门:</label>
            <div class="layui-input-inline" style="padding: 5px">
                <input type="text" name="dept" autocomplete="off" class="layui-input layui-input-inline"
                       placeholder="请输入员工所属部门" style="height: 30px;border-radius: 10px">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">性别:</label>
            <div class="layui-input-inline">
                <input type="radio" name="sex" value="1" title="男">
                <input type="radio" name="sex" value="0" title="女">
            </div>
            <button type="button"
                    class="layui-btn layui-btn-normal layui-icon layui-icon-search layui-btn-radius layui-btn-sm"
                    id="doSearch" style="margin-top: 4px">查询
            </button>
            <button type="reset"
                    class="layui-btn layui-btn-warm layui-icon layui-icon-refresh layui-btn-radius layui-btn-sm"
                    style="margin-top: 4px">重置
            </button>
        </div>
    </div>
</form>

<table class="layui-hide" id="employeeTable" lay-filter="employeeTable"></table>
<div id="employeeToolBar" style="display: none;">
    <button type="button" class="layui-btn layui-btn-sm layui-btn-radius" lay-event="add">增加</button>
</div>
<div id="employeeBar" style="display: none;">
    <a class="layui-btn layui-btn-xs layui-btn-radius" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-radius" lay-event="del">删除</a>
</div>

<!-- 添加和修改的弹出层-->
<div style="display: none;padding: 20px" id="saveOrUpdateDiv">
    <form class="layui-form" lay-filter="dataFrm" id="dataFrm">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">员工姓名:</label>
                <div class="layui-input-inline">
                    <input type="text" name="empname" lay-verify="required" placeholder="请输入员工姓名" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">身份证号:</label>
                <div class="layui-input-inline">
                    <input type="text" name="identity" lay-verify="required" placeholder="请输入员工身份证号" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">家庭住址:</label>
                <div class="layui-input-inline">
                    <input type="text" name="address" placeholder="请输入家庭地址" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">所属部门:</label>
                <div class="layui-input-inline">
                    <input type="text" name="dept" placeholder="请输入员工所属部门" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">员工电话:</label>
                <div class="layui-input-inline">
                    <input type="text" name="phone" lay-verify="required|phone" placeholder="请输入员工电话" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">员工性别:</label>
                <div class="layui-input-inline">
                    <input type="radio" name="sex" value="1" checked="checked" title="男">
                    <input type="radio" name="sex" value="0" title="女">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block" style="text-align: center;padding-right: 120px">
                <button type="button"
                        class="layui-btn layui-btn-normal layui-btn-md layui-icon layui-icon-release layui-btn-radius"
                        lay-filter="doSubmit" lay-submit="">提交
                </button>
                <button type="reset"
                        class="layui-btn layui-btn-warm layui-btn-md layui-icon layui-icon-refresh layui-btn-radius">重置
                </button>
            </div>
        </div>
    </form>
</div>

<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
<script type="text/javascript">
    var tableIns;
    layui.use(['jquery','layer','form','table'],function (){
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        
        tableIns = table.render({
            elem:"#employeeTable", 
            url:"${pageContext.request.contextPath}/employee/loadAllEmployee",
            title:"员工数据表", 
            toolbar:"#employeeToolBar",
            height:"full-210",
            cellMinWidth:100,
            page: true,
            cols:[[
                {type:'checkbox', fixed:'left'},
                {field:"identity" ,title:"身份证号码", align:"center", width:"200"},
                {field:"empname" ,title:"员工姓名", align:"center", width:"125"},
                {field:"address" ,title:"员工地址", align:"center", width:"125"},
                {field:"dept" ,title:"员工部门", align:"center", width:"150"},
                {field:"phone" ,title:"员工电话", align:"center", width:"150"},
                {field:"sex" ,title:"性别", align:"center", width:"150",  templet:function (d){
                    return d.sex == '1' ? '<font color="blue">男</font>' : '<font color="red">女</font>'
                    }},
                {field:"entrytime" ,title:"入职时间", align:"center", width:"150"},
                {fixed: "right", title: "操作" ,toolbar:"#employeeBar",align: "center", width: "150"},
            ]]           
            ,limits: [3,5,7,20]
            , limit: 5
            ,done:function (data,curr,count){
                if(data.data.length == 0 && curr != 1){
                    tableIns.reload({
                        page:{
                            curr:curr-1
                        }
                    })
                }
            }
        });
        
        $("#doSearch").click(function (){
            var params = $("#searchFrm").serialize();
            tableIns.reload({
                url:"${pageContext.request.contextPath}/employee/loadAllEmployee?" + params,
                page:{curr:1}
            })
        });
        
        table.on("toolbar(employeeTable)", function (obj){
            switch (obj.event){
                case 'add':
                    openAddEmployee();
                    break;
                case 'delete':
                    deleteBatch();
                    break;
            }
        })
        var url;
        var mainIndex;
        function openAddEmployee(){
            mainIndex = layer.open({
                type:1,
                title: "添加员工",
                content: $("#saveOrUpdateDiv"),
                area:["700px", "320px"],
                success: function (index){
                    $("#dataFrm")[0].reset();
                    url="${pageContext.request.contextPath}/employee/addEmployee";
                }
            })
        }
        
        form.on("submit(doSubmit)", function (obj){
            var params = $("#dataFrm").serialize();
            $.post(url,params,function (obj){
                layer.msg(obj.msg);
                layer.close(mainIndex);
                table.reload();
            })
        })
        
        table.on('tool(employeeTable)', function (obj){
            var data = obj.data;
            if (obj.event == 'del'){
                layer.confirm("亲~要删除[" + data.empname + "]这个用户信息吗？", function (index){
                    $.get("${pageContext.request.contextPath}/employee/deleteEmployee",{identity: data.identity}, function (res){
                        layer.msg(res.msg);
                        table.reload()
                    })
                });
            } else if(obj.event == 'edit'){
                openUpdateEmployee(data);
                tableIns.reload();
            }
        })
        
        function openUpdateEmployee(data){
            mainIndex = layer.open({
                type: 1,
                title: "修改员工信息",
                content: $("#saveOrUpdateDiv"),
                area: ["700px","320px"],
                success: function (index){
                    form.val("dataFrm",data);
                    url = "${pageContext.request.contextPath}/employee/updateEmployee";
                }
            });
        }
    })
    
</script>
</body>
</html>

